<template>
  <!-- 用户管理页面 -->
  <div class="userManagement">
    <div class="searchContainer">
      <div class="item">
        姓名
        <el-input type="text" v-model="searchInfo.name" placeholder="请输入" maxlength="11"></el-input>
      </div>
      <div class="item">
        电话号码
        <el-input type="text" v-model="searchInfo.telephone" placeholder="请输入" maxlength="11"></el-input>
      </div>
      <div class="btn">
        <button @click="searchList">查询</button>
      </div>
    </div>
    <div class="tableContainer">
      <div class="head">
        <div class="tittle">
          <span>用户列表</span>
        </div>
        <div class="editBtn">
          <!-- <button>批量删除</button> -->
          <button @click="addUser">新增</button>
        </div>
      </div>
      <div class="table">
        <el-table
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{
            textAlign: 'center',
            color: '#333',
            fontWeight: '400',
            fontSize: '14px',
            height: '45px',
            padding: '0px',
            margin: '0',
          }"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column fixed label="编号" width="60">
            <template slot-scope="scope">
              <span @click="toUserDetail(scope.row.id)">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div @click="toUserDetail(scope.row.id)" class="nameDiv">
                <span class="name">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="wechatName" label="微信昵称" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column label="性别">
            <template slot-scope="scope">
              <!-- {{scope.row}} -->
              <span v-if="scope.row.sex === 0">男</span>
              <span v-if="scope.row.sex === 1">女</span>
            </template>
          </el-table-column>
          <el-table-column prop="telephone" label="电话号码"> </el-table-column>
          <el-table-column label="车牌号" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-if="scope.row.carIdList.length > 1">
                <!-- <p v-for="(item, index) in scope.row.carIdList" :key="index" style="margin: 0px 5px">{{ item.carId }}</p> -->
                <span>多个车辆</span>
              </div>
              <div v-else>
                <!-- <p v-for="(item, index) in scope.row.carIdList" :key="index" style="margin: 0px 5px">{{ item.carId }}</p> -->
                <span v-if="scope.row.carIdList[0]">{{ scope.row.carIdList[0].carId }} </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="地址" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="memo" label="备注" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <div class="tableBtn">
                <el-button @click="editUser(scope.row)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="block">
      <el-pagination :page-size="this.paging.ps" :pager-count="11" layout="prev, pager, next" @current-change="handleCurrentChange" background :total="this.paging.total"> </el-pagination>

      <!-- <el-pagination
     @current-change="handleCurrentChange"
    layout="prev, pager, next"
    :total="this.paging.total">
    </el-pagination> -->
    </div>
    <EditUser ref="editChild" @getUserList="getUserList"></EditUser>
    <AddUser ref="addChild" @getUserList="getUserList"></AddUser>
    <UserDetail ref="detailChild" @getUserList="getUserList"></UserDetail>
  </div>
</template>

<script>
import EditUser from './EditUser.vue'
import AddUser from './AddUser.vue'
import UserDetail from './UserDetail.vue'
export default {
  components: {
    EditUser, AddUser, UserDetail
  },
  data() {
    return {
      searchInfo: {
        name: null,
        telephone: null
      },
      tableData: [],
      paging: {
        p: 1,
        ps: 13,
        total: 50
      }
    }
  },
  // 计算属性
  computed: {
    hIndex() {
      // 当前页数 - 1 * 每页数据条数 + 1
      return (this.paging.p - 1) * this.paging.ps + 1
    }
  },

  methods: {
    // 点击编辑用户
    editUser(val) {
      // console.log(val)
      this.$refs.editChild.openEdit(val.id)
    },
    addUser() {
      this.$refs.addChild.openAdd()
    },
    // 删除用户
    async deleteUser(val) {
      console.log(val)
      const list = [val]
      // console.log(list)
      this.$confirm('确认删除该用户信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$http.delete('/user', { data: list })
        console.log(res)
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getUserList()
        } else {
          this.$message.error('删除失败')
        }
      }).catch(
        () => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取用户列表
    async getUserList() {
      // const { data } = await this.$http.get('/user/page', { params: { p: this.paging.p, ps: 10, carId: this.searchInfo.carId, name: this.searchInfo.name } })
      const { data } = await this.$http.get('/user/page', { params: { p: this.paging.p, ps: this.paging.ps } })
      console.log(data.data)
      if (data.code === 200) {
        this.tableData = data.data.records
        this.paging.total = data.data.total
      }
    },
    // 点击搜索
    async searchList() {
      console.log(this.searchInfo)
      // this.searchInfo.telephone =
      const { data } = await this.$http.get('/user/page', { params: { p: 1, ps: this.paging.ps, name: this.searchInfo.name, telephone: this.searchInfo.telephone } })
      console.log(data)
      if (data.code === 200) {
        this.tableData = data.data.records
        this.paging.total = data.data.total
      }
      console.log(this.paging)
    },
    async nextPage() {
      console.log(this.searchInfo)
      // this.searchInfo.telephone =
      const { data } = await this.$http.get('/user/page', { params: { p: this.paging.p, ps: this.paging.ps, name: this.searchInfo.name, telephone: this.searchInfo.telephone } })
      console.log(data)
      if (data.code === 200) {
        this.tableData = data.data.records
        this.paging.total = data.data.total
      }
      console.log(this.paging)
    },
    // 点击下一页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.paging.p = val
      this.nextPage()
    },
    // 点击查看详情
    toUserDetail(val) {
      console.log(val)
      this.$refs.detailChild.openDetail(val)
    }
  },
  created() {
    this.getUserList()
  }
}
</script>
<style>
body,
html,
#app {
  min-width: 1100px !important;
}
</style>
<style lang="less" scoped>
.userManagement {
  padding: 15px 20px;
  // padding-right: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #ffffff;
  font-family: PingFangSC-Regular, PingFang SC;
  // height: 900px;
  color: #333333;
  button {
    cursor: pointer;
  }
  .searchContainer {
    display: flex;
    height: 50px;
    .item {
      font-size: 14px;
      color: #555;
      margin-right: 30px;
      /deep/ .el-input {
        width: 140px;
        height: 30px;
        border-radius: 15px;
        .el-input__inner {
          width: 140px;
          height: 30px;
          border-radius: 15px;
        }
      }
      // span {
      //   font-size: 14px;
      //   font-weight: 400;
      //   color: #555555;
      // }
      // input {
      //   margin-left: 5px;
      //   width: 140px;
      //   height: 30px;
      //   background: #ffffff;
      //   border-radius: 15px;
      //   border: 1px solid #ababab;
      //   padding-left: 10px;
      // }
    }
    .btn {
      button {
        width: 90px;
        height: 30px;
        background: #333333;
        border-radius: 18px;
        font-weight: 400;
        color: #ffffff;
        font-size: 16px;
      }
    }
  }
  .tableContainer {
    .head {
      height: 50px;
      background: #eeeeee;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tittle {
        padding-left: 20px;
        span {
          font-weight: 400;
          color: #333333;
          font-size: 16px;
        }
      }
      .editBtn {
        button {
          cursor: pointer;
          width: 80px;
          height: 30px;
          border-radius: 15px;
          font-size: 16px;
          color: #333;
          margin-right: 20px;
        }
      }
    }

    .el-table {
      margin: 0;
      .nameDiv {
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .name {
        color: #2fc0e0;
        cursor: pointer;
      }
      .name:hover {
        text-decoration: underline;
      }
      .el-table__row td {
        height: 40px;
      }
      .tableBtn {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        button {
          font-size: 14px;
          font-weight: 400;
          color: #555555;
        }
        button:hover {
          color: rgb(6, 83, 250);
        }
      }
    }
  }
}
/deep/.el-table__row {
  height: 40px;
}
/deep/.el-table__row td {
  // box-sizing: border-box;
  padding: 0;
  height: 40px;
}
.block {
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #333;
  }
}
</style>
